<template>
	<view class="utoastBox" v-if="params.utoastControl">
		<view class="utoast ff-line-height-1-3" :class="[params.utoastType ? 'bgSuccess' : 'bgError']">
			{{ params.utoastTxt }}
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	let params = reactive({
		utoastControl: false, // 加载动画显示隐藏
		utoastType: true, // 类型 成功or失败
		utoastTxt: '', // 动画的文字提示
	});
	// 打开动画(成功)
	let openuToastSuccess = (e, type) => {
		params.utoastTxt = e;
		params.utoastType = true;
		params.utoastControl = true;
		setTimeout(() => {
			params.utoastControl = false;
			params.utoastTxt = '';
		}, 1500);
	};
	// 打开动画(失败)
	let openuToastError = (e, type) => {
		params.utoastTxt = e;
		params.utoastType = false;
		params.utoastControl = true;
		setTimeout(() => {
			params.utoastControl = false;
			params.utoastTxt = '';
		}, 2000);
	};
	defineExpose({
		openuToastSuccess,
		openuToastError
	});
</script>

<style scoped lang="scss">
	.utoastBox {
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 111;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.utoast {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 25rpx 30rpx;
		border-radius: 10rpx;
		max-width: 600rpx;
		// transition: all 0.5s ease-out;78
	}

	.bgSuccess {
		color: #60c82a;
		border: 2rpx solid #c2f5cb;
		background-color: #dbf1e1;
	}

	.bgError {
		color: #f56c6c;
		border: 2rpx solid #fde2e2;
		background-color: #fef0f0;
	}
</style>